'use client'
import Button  from '@/components/common/Button'
import { HiPlus} from 'react-icons/hi'
import { LuPanelLeft } from 'react-icons/lu'
import { useAppContext } from '@/components/AppContext'
import { ActionType } from '@/reducers/AppReducer'
import ChatList from './ChatList'


export default function Navigation() {
    const {
        state: { dispalyNavigation }
    } = useAppContext()
    console.log('Navigation render')
    const { dispatch } = useAppContext()
    return (
        <nav className={`${dispalyNavigation ? 'block' : 'hidden'} flex flex-col  h-full w-[250px] bg-gray-900 text-gray-300 p-4`}>
            <ChatList />
            <div className='flex space-x-3'>
                <Button icon={HiPlus}> 新建对话</Button>
                <Button icon={LuPanelLeft}
                    onClick={() => {
                      dispatch({type:ActionType.UPDATE, fieId:'dispalyNavigation',value:!dispalyNavigation})
                    }}
                />
            </div>
        </nav>
    )
}